<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="./org/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="./org/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet">
<link href="./org/css/cy.css" rel="stylesheet">
<script src="./org/angular.min.js"></script>
<script src="./org/underscore-min.js"></script>
</head>
<body>
  <div ng-app='cy' ng-controller='ctrl'>
		<form action="" method="post" class="form-horizontal" role="form">
			<div class="container">
				<div class="row">
					<div class="col-xs-4">
						<div class="mobile">
							<dl ng-repeat="v in data.button">
								<dt ng-bind="v.name"></dt>
								<dd ng-repeat="v1 in v.sub_button">
									<a href="{{v1.url}}" ng-bind="v1.name"></a>
								</dd>
							</dl>
						</div>
					</div>
					<div class="col-xs-8">
						<div class="panel panel-default">
							<div class="panel-heading">
								<h3 class="panel-title">编辑</h3>
							</div>
							<div class="panel-body">
								<!--一级菜单开始-->
								<div class="panel panel-default cy-menu" ng-repeat="v in data.button">
								<i class="fa fa-times-circle fa-lg cy-fa" aria-hidden="true" ng-click="removeTopMenu(v)"></i>
									<div class="panel-body" ng>
										<div class="form-group">
											<label for="" class=" col-sm-2 control-label">一级标题</label>
											<div class="col-sm-10">
												<input type="text" class="form-control" ng-model="v.name">
											</div>
										</div>
										<div class="form-group" ng-hide="v.sub_button.length>0">
											<label for="" class=" col-sm-2 control-label" >一级类型</label>
											<div class="col-sm-10">
												<label class="radio-inline">
												  <input type="radio" value="click" ng-model="v.type"> 一级关键词
												</label>
												<label class="radio-inline">
												  <input type="radio" value="view" ng-model="v.type"> 一级网址
												</label>
											</div>
										</div>
										<div class="form-group" ng-if	="v.type=='view' && (v.sub_button.length==0 ||!v.sub_button)">
													<label for="" class=" col-sm-2 control-label">一级链接</label>
													<div class="col-sm-10">
														<input type="text" class="form-control" ng-model="v.url">
													</div>
										</div>
										<div class="form-group" ng-if	="v.type=='click' && (v.sub_button.length==0 ||!v.sub_button)">
													<label for="" class=" col-sm-2 control-label">一级关键词</label>
													<div class="col-sm-10">
														<input type="text" class="form-control" ng-model="v.key">
													</div>
										</div>
										<!--二级菜单开始-->
										<div class="panel panel-default cy-menu-2" ng-repeat="v1 in v.sub_button">
											<i class="fa fa-times-circle fa-lg cy-fa-2" aria-hidden="true" ng-click="removeTwoMenu(v,v1	)"></i>
											<div class="panel-body">
												<div class="form-group">
													<label for="" class=" col-sm-2 control-label">标题</label>
													<div class="col-sm-10">
														<input type="text" class="form-control" ng-model="v1.name">
													</div>
												</div>
												<div class="form-group">
													<label for="" class=" col-sm-2 control-label" >类型</label>
													<div class="col-sm-10">
														<label class="radio-inline">
														  <input type="radio" value="click" ng-model="v1.type"> 关键词
														</label>
														<label class="radio-inline">
														  <input type="radio" value="view" ng-model="v1.type"> 网址
														</label>
													</div>
												</div>
												<div class="form-group" ng-if	="v1.type=='view'">
													<label for="" class=" col-sm-2 control-label">链接</label>
															<div class="col-sm-10">
																<input type="text" class="form-control" ng-model="v1.url">
															</div>
												</div>
												<div class="form-group" ng-if	="v1.type=='click'">
															<label for="" class=" col-sm-2 control-label">关键词</label>
															<div class="col-sm-10">
																<input type="text" class="form-control" ng-model="v1.key">
															</div>
												</div>
											</div>
										</div>
									<!--二级菜单结束-->
									<button  type="button" class="btn btn-info" ng-click="addTwoMenu(v)">添加二级菜单</button>
								</div>
							</div>
							<!--一级开单开始-->
							<button type="button" class="btn btn-success" ng-click="addTopMenu()">添加一级菜单</button>
						</div>
					</div>
				</div>
			</div>
		</form>
  </div>
	<script>
		var m=angular.module('cy',[]);
		m.controller('ctrl',['$scope',function($scope){
			$scope.data= {
	     "button":[
	      {	
	          "type":"click",
	          "name":"今日歌曲",
	          "key":"V1001_TODAY_MUSIC"
	      },
	      {
	           "type":"view",
	           "name":"菜单",
	           "sub_button":[
	            {	
	               "type":"view",
	               "name":"搜索",
	               "url":"http://www.soso.com/"
	            },
	            {
	               "type":"view",
	               "name":"视频",
	               "url":"http://v.qq.com/"
	            },
	            {
	               "type":"click",
	               "name":"赞一下我们",
	               "key":"V1001_GOOD"
	            }]
	       }]
	 	};
	 	//删除一级菜单
	 	$scope.removeTopMenu=function(item){
	 		$scope.data.button=_.without($scope.data.button,item);
	 	}
	 	//删除二级菜单
	 	$scope.removeTwoMenu=function(parent,item){
	 		parent.sub_button=_.without(parent.sub_button,item);
	 	}
	 	//添加一级菜单
		$scope.addTopMenu=function(){
	 		var menu=  {	
	          "type":"view",
	          "name":"",
	          "key":""
	      };
	    if($scope.data.button.length==3){
	    	alert('最多允许三个一级菜单');
	    }else{
	    	$scope.data.button.push(menu);
	    }
	 	}
	 	//添加二级菜单
	 	$scope.addTwoMenu=function(item){
	 		var menu=  {	
	          "type":"view",
	          "name":"",
	          "key":""
	      };
	    if(!item.sub_button)item.sub_button=[];
	    if(item.sub_button.length==5){
	    	alert('最多允许五个二级菜单');
	    }else{
	    	item.sub_button.push(menu);
	    }
	 	}

		}]);
	</script>
</body>
</html>